<template>
  <div class="app-table">
    <a-descriptions title="当前状态">
      <a-descriptions-item label="已借出麦克风数量">
        {{ curState.out }}
      </a-descriptions-item>
      <a-descriptions-item label="剩余麦克风">
        {{ curState.remain }}
      </a-descriptions-item>
      <a-descriptions-item label="麦克风上限">
        {{ curState.max }}
      </a-descriptions-item>
    </a-descriptions>
    <a-table :columns="columns" :data-source="data">
      <template v-slot:action="{ record }">
        <span>
          <a-button
            type="primary"
            @click="
              transferVisible = !transferVisible;
              transferForm.toId = record.id;
            "
            :disabled="record.remain === record.max || record.id === id"
            >转移</a-button
          >
          <a-modal
            title="转移麦克风"
            v-model:visible="transferVisible"
            :confirm-loading="loading"
            @ok="transfer"
          >
            <a-form :model="transferForm">
              <a-form-item label="转移发起人"
                >{{ name }}（工号：{{ id }}）</a-form-item
              >
              <a-form-item label="转移接收人">
                {{ record.name }}（工号：{{ record.id }}）
              </a-form-item>
              <a-form-item label="转移数量">
                <a-input
                  v-model:value="transferForm.amount"
                  placeholder="请输入合理的数量"
                />
              </a-form-item>
            </a-form>
            你确定要将麦克风转移到{{ record.name }}（工号：{{ record.id }}）？
          </a-modal>
        </span>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, ref } from "vue";
import { BASE_URL, myPost, Response } from "@/utils/request";
import { useStore } from "vuex";
import { message } from "ant-design-vue";

export default defineComponent({
  name: "TransferTable",
  setup(props, context) {
    const data = ref([] as any[]);
    const store = useStore();
    const name = computed(() => store.getters.name);
    const id = computed(() => store.getters.id);
    const curState = ref("");
    console.log(name);
    // const columns = computed(() => getColumns(data.value));
    const columns = [
      {
        dataIndex: "name",
        key: "name",
        title: "姓名"
      },
      {
        dataIndex: "id",
        key: "id",
        title: "工号"
      },
      {
        dataIndex: "remain",
        key: "remain",
        title: "剩余麦克风数量"
      },
      {
        dataIndex: "max",
        key: "max",
        title: "最大麦克风数量"
      },
      {
        key: "action",
        title: "操作",
        slots: { customRender: "action" }
      }
    ];

    function getBorrowTable() {
      myPost(BASE_URL + "/officer/queryOfficer", {}).then((resp: Response) => {
        data.value = (resp.data.data as any[]).map((item, key) => ({
          ...item,
          key
        }));
      });
    }

    const loading = ref(false);
    const transferVisible = ref(false);
    const transferForm = reactive({
      fromId: id,
      toId: 0,
      amount: 0
    });

    let respBody = {
      isSuccess: false,
      msg: "",
      data: []
    };

    function success() {
      loading.value = false;
      const msg = respBody["msg"];
      message.success({ content: msg, duration: 2 });
    }

    function error() {
      loading.value = false;
      const msg = respBody["msg"];
      message.error({ content: msg, duration: 2 });
    }

    function update() {
      getBorrowTable();
      context.emit("update-cur-state-officer");
    }

    function transfer() {
      loading.value = true;
      myPost(BASE_URL + "/officer/transfer", transferForm)
        .then((resp: Response) => {
          respBody = resp.data;
          if (respBody["isSuccess"]) {
            success();
            transferVisible.value = false;
          } else {
            error();
          }
          update();
        })
        .catch((error: any) => {
          message.error({ content: error, duration: 2 });
        });
    }

    update();

    return {
      curState,
      columns,
      data,
      name,
      id,
      transferVisible,
      transferForm,
      transfer,
      loading
    };
  }
});
</script>
<style scoped></style>
